<template>
  <div class="container">
    <el-card class="cardbox">
      <div class="header">
        <div class="left">
          <div>关键字</div>
          <el-input v-model="Query.keyword" />
        </div>
        <div class="right">
          <el-button @click="removeinput()">清除</el-button>
          <el-button type="primary" @click="search()">搜索</el-button>
        </div>
      </div>
      <el-alert :title=" '数据一共'+this.total+'条'" type="info" show-icon class="infotitle"></el-alert>
      <el-table style="width: 100%" :data="list" :border="true" stripe>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="组题时间" prop="addTime"></el-table-column>
        <el-table-column label="用户名" prop="userName"></el-table-column>
        <el-table-column label="试题ID" prop="questionIDs">
          <template slot-scope="scope">
            <span v-for=" (item,index) in scope.row.questionIDs" :key="index" class="bluecolor">
              <a
                href="#"
                @click.prevent="openPreviewDialog(item)"
                style="color:#09f;"
              >{{item.number}}</a>
              <br />
            </span>
          </template>
        </el-table-column>
        <el-table-column label="正确率(%)" prop="accuracyRate"></el-table-column>
        <el-table-column label="答题总耗时（秒）" prop="totalSeconds"></el-table-column>
        <el-table-column label="组题类型/详情">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType==='2'">多选</span>
            <span v-else-if="scope.row.questionType==='1'">单选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <i class="el-icon-delete" @click="deleteRandoms(scope.row.id)"></i>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Query.page"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="Query.pagesize"
        layout=" prev, pager, next,sizes, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <questions-preview ref="questionsCheck" :date="questionInfo" />
  </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/questions'
import QuestionsPeview from '../components/questions-previews'
export default {
  data() {
    return {
      Query: {
        page: 1,
        pagesize: 10,
        keyword: '',
      },
      list: [],
      total: 0,
      questionInfo: {},
    }
  },
  components: {
    'questions-preview': QuestionsPeview,
  },
  methods: {
    async getRandoms() {
      const { data } = await list(this.Query)
      console.log(data)
      this.list = data.items
      this.total = data.counts
    },
    async deleteRandoms(user) {
      const confirmResulf = await this.$confirm('此操作将永久删除该组题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)
      if (confirmResulf != 'confirm') {
        return this.$message.info('已经取消了删除')
      }
      await remove({ id: user })
      this.$message.success('删除成功')
      this.getRandoms()
      const totalPage = Math.ceil((this.total - 1) / this.Query.pageSize) // 总页数
      this.Query.page = this.Query.page > totalPage ? totalPage : this.Query.page
    },
    //监听分页每页多少数据
    handleSizeChange(newSize) {
      this.Query.pagesize = newSize
      this.getRandoms()
    },
    //监听当前页数
    handleCurrentChange(newPage) {
      this.Query.page = 1
      this.Query.page = newPage
      this.getRandoms()
    },
    removeinput() {
      this.Query.keyword = ''
      this.getRandoms()
    },
    search() {
      this.Query.page = 1
      this.getRandoms()
    },
    openPreviewDialog(item) {
      this.questionInfo = item
      this.$nextTick(() => {
        this.$refs.questionsCheck.open()
      })
    },
  },
  created() {
    this.getRandoms()
  },
}
</script>

<style scoped lang='less'>
.container {
  .header {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      justify-content: center;
      align-items: center;
      div {
        width: 50px;
        font-size: 16px;
        font-weight: 700;
        margin-right: 10px;
      }
      /deep/ .el-input__inner {
        height: 35px;
        line-height: 35px;
        width: 300px;
      }
    }
  }
  .infotitle {
    margin: 10px 0;
  }
  /deep/.el-icon-delete {
    color: red;
    cursor: pointer;
  }
  .el-pagination {
    margin-top: 10px;
    float: right;
    padding-bottom: 15px;
  }
  .bluecolor {
    color: #0da6fa;
  }
}
</style>
